<template>
  <div class="page-container">
    <el-form class="el-form-modify two-col" ref="form" label-width="80px" :model="formData" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="权益类别" prop="privilegeId">
            <el-select v-model="formData.privilegeId">
              <el-option
                v-for="equity in equityList"
                :key="equity.id"
                :label="equity.name"
                :value="equity.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SKU" prop="sku">
            <el-select v-model="formData.sku" @change="skuChange">
              <el-option v-for="item in Object.keys(SKU)" :key="item" :label="SKU[item]" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格" prop="spec">
            <el-input v-model="formData.spec" />
          </el-form-item>
          <el-form-item label="成本价格" prop="costPrice">
            <el-input-number v-model="formData.costPrice" controls-position="right" :precision="2" :min="0.01">
            </el-input-number>元
          </el-form-item>
          <el-form-item label="活动价格" prop="activityPrice">
            <el-input-number v-model="formData.activityPrice" controls-position="right" :precision="2" :min="0.01">
            </el-input-number>元
          </el-form-item>
          <el-form-item label-width="120px" style="margin-left: -40px;">
            <p style="line-height: 1.5;" slot="label">活动价格<br/>（积分+现金）</p>
            <el-input-number v-model="formData.activityScore" :precision="0"
              :min="0" controls-position="right" :disabled="formData.sku == 'SINGLE'">
            </el-input-number>元积分+
            <el-input-number v-model="formData.activityScorePrice" :precision="2"
              :min="0.01" controls-position="right"></el-input-number>元
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="formData.description"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属品牌" prop="brandId">
            <el-select v-model="formData.brandId">
              <el-option
                v-for="brand in brandList"
                :key="brand.id"
                :label="brand.name"
                :value="brand.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input-number v-model="formData.stock" :min="0" controls-position="right"/>
          </el-form-item>
          <el-form-item label="销售价格" prop="salePrice">
            <el-input-number v-model="formData.salePrice" :precision="2"
              :min="0.01" controls-position="right">
            </el-input-number>元
          </el-form-item>
          <el-form-item label-width="120px" style="margin-left: -40px;" label="积分+现金价格">
            <el-input-number v-model="formData.score" :precision="0"
              :min="0" controls-position="right" :disabled="formData.sku == 'SINGLE'">
            </el-input-number>元积分+
            <el-input-number v-model="formData.scorePrice" :precision="2"
              :min="0.01" controls-position="right"></el-input-number>元
          </el-form-item>
          <el-form-item label="使用期限" prop="validityPeriod">
            <el-input-number v-model="formData.validityPeriod" :min="1" controls-position="right">
            </el-input-number>
            <el-select v-model="formData.validityUnit" style="width: 80px;">
              <el-option v-for="item in Object.keys(Period)" :key="item" :label="Period[item]" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center;margin-top: 40px">
        <el-button type="primary" size="small" @click="save" :loading="saving">保存</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </div>
    </el-form> 
  </div>
</template>

<script>
import {SKU, Period, momentFormatStr} from '@/utils/const';
import {productAdd, productEdit, productDetail} from '@/api/product'
import moment from 'moment';
import {rules} from '@/utils/validate'

export default {
  name: 'EquityForm',
  props: ['equityList', 'brandList', 'selectData'],
  data() {
    this.SKU = SKU;
    this.Period = Period;
    let formData = {
      privilegeId: '',
      sku: '',
      spec: '',
      costPrice: '',
      activityPrice: '',
      description: '',
      brandId: '',
      name: '',
      stock: '',
      salePrice: '',
      score: '',
      scorePrice: '',
      activityScore: '',
      activityScorePrice: '',
      validityUnit: Object.keys(Period)[0],
      validityPeriod: 1
    }

    return {
      formData,
      rules: {
        privilegeId: [rules.select_required],
        brandId:[rules.select_required],
        sku: [rules.select_required],
        name: [rules.required, rules.text2_18],
        spec: [rules.required, rules.text2_18],
        costPrice: [rules.required],
        salePrice: [rules.required],
      },
      saving: false
    }
  },
  methods: {
    async requestDetail(id) {
      try {
        const {data} = await productDetail(id)
        if (data) {
          this.formData = {
            ...data,
            name: data.productName
          }
        } else {
          this.cancel();
        }
      } catch(err) {
        this.cancel();
      }
    },
    save() {
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return;
        }
        try {
          this.saving = true;
          let formData = this.formData
          if (formData.productId) {
            await productEdit(formData.productId, formData)
          } else {
            await productAdd(formData)
          }
          this.saving = false;
          this.$message.success('保存成功!');
          this.$emit('refresh');
          this.cancel();
        } catch(err) {
          this.saving = false;
        }
      })
    },
    cancel() {
      this.$router.push({name: 'productMgt'});
    },
    skuChange(value) {
      if (value == 'SINGLE') {
        this.formData.score = 0;
      }
    }
  },
  created() {
    if (this.$route.name === 'editProduct') {
      let {id} = this.$route.params;
      if (id) {
        this.requestDetail(id);
      } else {
        this.cancel();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container{
  overflow-x: auto
}
</style>